import React, { Component } from 'react'
import { Popconfirm, Button } from 'antd';
import logo from "../static/image/logo.png"
import image from "../static/image/user.png"
import { withRouter } from "umi"
import { getdata } from "../http/management.js"

class Header extends Component {
    state = {
        data: ''
    }
    componentDidMount() {
        this.getall()
    }
    //获取用户信息
    getall = async () => {
        const res = await getdata()
        if (res.code == 200) {
            const data = localStorage.getItem('username')
            const resl = res.message
            const data2 = resl.filter(item => item.account == data)
            this.setState({
                data: data2[0].realname
            })
        }


    }
    confirm = () => {
        localStorage.removeItem('username')
        localStorage.removeItem('token')
        console.log(this.props)
        this.props.history.push('/')
    }
    render() {
        return (
            <div className="header">

                <div style={{fontSize:"20px",fontWeight:'bold',color:'white',paddingLeft:"20px"}}>
                    <img src={logo} />
                    <span>现代食谱后台管理系统</span>
                </div>
                <div>
                    <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: "50px", height: '50px', borderRadius: "50%", border: '1px solid #cccccc' }}>
                        <img src={image} style={{ width: "25px", height: '25px', margin: '0' }} />
                    </div>
                    <span style={{ padding: '0 15px' ,color:'white',fontWeight:'bold'}}>欢迎您：【 {this.state.data} 】</span>
                    <Popconfirm placement="bottom" onConfirm={this.confirm} title='您确认注销登录吗？' okText="是" cancelText="否">
                        <Button type='primary'>注销</Button>
                    </Popconfirm>
                </div>
            </div>
        )
    }
}

export default withRouter(Header)


